<template>
  <div class="more-container">
    <div class="topsearch">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="100px"
      >
        <el-row>
          <el-col :span="4">
            <el-row>
              <el-form-item label-width="0" prop="keyword">
                <el-input
                  v-model="formData.keyword"
                  placeholder="搜索姓名/电话"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <span style="color: #fff">1</span>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row>
              <div class="rightbtn fr">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  @click="searchlist"
                >
                  查询
                </el-button>
                <el-button
                  icon="el-icon-refresh-left"
                  size="small"
                  @click="resetform"
                >
                  重置
                </el-button>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <studenthead :tabData='tabData' @handleSizeChange='changepageTotal' @handleCurrentChange='changepage' v-if="issuccess">
      <el-table-column prop="cost_type" label="收入类型" align="center" >
          <template slot-scope="scope">
              <span v-if="scope.row.cost_type.title">{{scope.row.cost_type.title}}</span>
              <span v-else>-</span>
          </template>
      </el-table-column>
      <el-table-column prop="cost_money" label="收入金额" align="center" >
        <template slot-scope='scope'>
          <span v-if="scope.row.cost_money">{{scope.row.cost_money}}元</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="cost_time" label="交费日期" align="center" >
        <template slot-scope='scope'>
          <span v-if="scope.row.cost_time">{{scope.row.cost_time}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="val6" label="审核状态" align="center" >
          <template slot-scope="scope">
             <span>{{scope.row.status.title}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="approval_user" label="审核人" align="center" >
        <template slot-scope='scope'>
          <span v-if="scope.row.approval_user">{{scope.row.approval_user}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="update_time" label="审核日期" align="center" width="160">
        <template slot-scope='scope'>
          <span v-if="scope.row.update_time&&scope.row.approval_user!='-'">{{scope.row.update_time}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="val9" label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.status.value==0 && checkPermission(['chargeSure','chargeReject'])">
                <span class="edittext" v-if="checkPermission(['chargeSure'])" @click="consent(scope.row.costId)">确认收费</span>
                <span class="edittext" v-if="checkPermission(['chargeReject'])" @click="rejectclick(scope.row.costId)" >驳回</span>
            </div>
            <span v-else>-</span>
          </template>
      </el-table-column>
    </studenthead>

    <!-- 驳回弹窗 -->
    <rejectdialog :isshowDialog="isshowreject" @refresh='refreshdata' @closetextDialog='closereject' :priceparams='priceparams'></rejectdialog>

  </div>
</template>

<script>
//表格
import studenthead from '@/components/studenthead'
//api
import {getcostList,approval} from '@/api/finance'
//驳回弹窗
import rejectdialog from './component/rejectdialog'
  //按钮权限验证
  import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      issuccess:false,
      //驳回弹窗参数
      priceparams:{},
      //是否显示驳回弹窗
      isshowreject:false,
      formData: {
        keyword: undefined,
      },
      //表单验证
      rules: {
        keyword: [],
      },
      //页码
      page:1,
      //一页有多少条数据
      total:10,
      //表格数据
      tabData:{}
    }
  },
  methods: {
	  checkPermission,
    //刷新列表 关闭弹窗
    refreshdata(){
      this.getlistData()
      this.isshowreject = false
    },
    //关闭驳回
    closereject(){
        this.isshowreject = false
    },
    //确认收费
    consent(id){
       this.$confirm('一旦确认将不可撤回,是否继续？', '确认收费吗？', {
                confirmButtonText: '继续',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(async () => {
                let params = {
                  id:id,
                  status:1,
                  back_info:''
                }
                let data = await approval(params)
                if(data.code=='0000'){
                    this.$message.success('确认收费成功')
                    //刷新列表
                    this.getlistData()
                }

              }).catch(() => {

              });
    },
    //驳回
    rejectclick(id){
      let params = {
        id:id
      }
      this.priceparams = params
      this.isshowreject = true
    },
    //获取列表数据
    async getlistData(){
      let params = {
        page:this.page,
        rows:this.total,
        type:1,
        _request:1
      }
      if(this.formData.keyword){
        params.keyword = this.formData.keyword
      }
      let data = await getcostList(params)
      if(data.code=='0000'){
        this.tabData = data.data
        this.issuccess = true
      }
    },
    //一页总数翻页
    changepageTotal(val){
      this.total = val;
      //刷新列表
      this.getlistData()
    },
    //翻页操作
    changepage(val){
      this.page = val;
      //刷新列表
      this.getlistData()
    },
    //搜索
    searchlist() {
      this.getlistData()
      this.$message({
        type: 'success',
        message: '查询成功!',
      })
    },
    //重置
    resetform() {
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      this.$refs['elForm'].resetFields()
    }
  },
  components: {
    studenthead,
    rejectdialog
  },
  mounted() {
    //获取列表数据
    this.getlistData()
  }
}
</script>


<style lang='scss' scoped>
 .Tables {
    margin-top: 25px;
  }

  .edittext {
    margin: 0 5px;
    color: #4c68ef;
    cursor: pointer;
  }

  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
</style>
